<template>
  <el-cascader
    :value="value"
    size="mini"
    separator="-"
    :props="defaultProps"
    :options="depts"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
import { getDepartmentsApi } from "@/api/department";
import { transListToTree } from "@/utils/index";
export default {
  props:{
    value:Number
  },
  data() {
    return {
      departmentId: '',
      defaultProps: {
        label: "name",
        value: "id",
      },
      depts: [],
    };
  },
  created() {
    this.getDepartments();
  },
  methods: {
    handleChange(val) {
      if(val.length > 0){
        this.$emit('input', val.at(-1))
      } else {
        this.$emit('input', null)
      }
    },
    async getDepartments() {
      const res = await getDepartmentsApi();
      this.depts = transListToTree(res, 0);
    },
  },
};
</script>

<style></style>
